<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8"/>
    <title>cart</title>
    <link rel="stylesheet" type="text/css" href="/static/css/public.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/proList.css"/>
    <script src="/static/vue-2.5.16.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/axios-0.18.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/host.js" type="text/javascript" charset="utf-8"></script>
    <style>
        .GO{
	height:500px;
	line-height:500px;
	font-size: 16px;
	color:#666;
	text-align: center;

}
    .GO a{
        color: #C10000;
        text-decoration: underline;
    }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <!--------------------------------------cart--------------------->
    <div class="head ding">
        <div class="wrapper clearfix">
            <div class="clearfix" id="top">
                <h1 class="fl"><a href="{{ url('index:index') }}"><img src="/static/img/logo.png"/></a></h1>
                <div class="fr clearfix" id="top1">
                    <p class="fl">
                        <a href="login.html" id="login">登录</a>
                        <a href="reg.html" id="reg">注册</a>
                    </p>
                    <form action="#" method="get" class="fl">
                        <input type="text" placeholder="搜索"/>
                        <input type="button"/>
                    </form>
                    <div class="btn fl clearfix">
                        <a href="my_center.html"><img src="/static/img/grzx.png"/></a>
                        <a href="#" class="er1"><img src="/static/img/ewm.png"/></a>
                        <a href="cart.html"><img src="/static/img/gwc.png"/></a>
                        <p><a href="#"><img src="/static/img/smewm.png"/></a></p>
                    </div>
                </div>
            </div>
            <ul class="clearfix" id="bott">
					<li><a href="/">首页</a></li>
					<li>
						<a href="#">所有商品</a>
						<div class="sList">
							<div class="wrapper  clearfix">
								<a href="/paint">
									<dl>
										<dt><img src="/static/img/nav1.jpg"/></dt>
										<dd>浓情欧式</dd>
									</dl>
								</a>
								<a href="/paint">
									<dl>
										<dt><img src="/static/img/nav2.jpg"/></dt>
										<dd>浪漫美式</dd>
									</dl>
								</a>
								<a href="/paint">
									<dl>
										<dt><img src="/static/img/nav3.jpg"/></dt>
										<dd>雅致中式</dd>
									</dl>
								</a>
								<a href="/paint">
									<dl>
										<dt><img src="/static/img/nav6.jpg"/></dt>
										<dd>简约现代</dd>
									</dl>
								</a>
								<a href="/paint">
									<dl>
										<dt><img src="/static/img/nav7.jpg"/></dt>
										<dd>创意装饰</dd>
									</dl>
								</a>
							</div>
						</div>
					</li>
					<li>
						<a href="/flowerDer">装饰摆件</a>
						<div class="sList2">
							<div class="clearfix">
								<a href="/proList">干花花艺</a>
								<a href="/vase_proList">花瓶花器</a>
							</div>
						</div>
					</li>
					<li>
						<a href="/decoration">布艺软饰</a>
						<div class="sList2">
							<div class="clearfix">
								<a href="{{ url('goods:zbproList') }}">桌布罩件</a>
								<a href="/bzproList">抱枕靠垫</a>
							</div>
						</div>
					</li>
					<li><a href="/paint">墙式壁挂</a></li>
					<li><a href="/perfume">蜡艺香薰</a></li>
					<li><a href="/idea">创意家居</a></li>
				</ul>
        </div>
    </div>
    <div class="cart mt">
        <!-----------------logo------------------->
        <!--<div class="logo">
            <h1 class="wrapper clearfix">
                <a href="index.html"><img class="fl" src="/static/img/temp/logo.png"></a>
                <img class="top" src="/static/img/temp/cartTop01.png">
            </h1>
        </div>-->
        <!-----------------site------------------->
        <div class="site">
            <p class=" wrapper clearfix">
                <span class="fl">购物车</span>
                <img class="top" src="/static/img/temp/cartTop01.png">
                <a href="/" class="fr">继续购物&gt;</a>
            </p>
        </div>
        <!-----------------table------------------->
        <div class="table wrapper">
            <div class="tr">
                <div>商品</div>
                <div>单价</div>
                <div>数量</div>
                <div>小计</div>
                <div>操作</div>
            </div>

            {% if cart_skus %}
                {% for cart_sku in cart_skus %}
                    {% if cart_sku.id %}
                        <div class="th">
                            <div class="pro clearfix">
                                <label class="fl">
                                    <input type="checkbox"/>
                                    <span></span>
                                </label>
                                <a class="fl" href="#">
                                    <dl class="clearfix">
                                        <dt class="fl"><img height="100px" width="100px"
                                                            src="{{ cart_sku.default_image_url }}"></dt>
                                        <dd class="fl">
                                            <p>{{ cart_sku.name }}</p>
                                            {#									<p>颜色分类:</p>#}
                                            {#									<p>------------</p>#}
                                        </dd>
                                    </dl>
                                </a>
                            </div>
                            <div class="price">￥{{ cart_sku.price }}</div>
                            <div class="number">
                                <p class="num clearfix">
                                    <img class="fl sub" src="/static/img/temp/sub.jpg">
                                    <span class="fl">{{ cart_sku.count }}</span>
                                    <img class="fl add" src="/static/img/temp/add.jpg">
                                </p>
                            </div>
                            <div class="price sAll">￥{{ cart_sku.amount }}</div>
                            <div class="price"><a href="/del_carts/?id={{ cart_sku.id }}">删除</a></div>
                        </div>
                    {% endif %}
                {% endfor %}
            {% else %}
                <div class="GO">空空如也~<a href="{{ url('index:index') }}">去逛逛</a></div>

            {% endif %}

            <div class="tr clearfix">
                <label class="fl">
                    <input class="checkAll" type="checkbox"/>
                    <span></span>
                </label>
                <p class="fl">
                    <a href="#">全选</a>
{#                    <a @click="on_delete(index)">删除</a>#}
                </p>
                <p class="fr">
                    <span>共<small id="sl">0</small>件商品</span>
                    <span>合计:&nbsp;<small id="all">￥0.00</small></span>
                    <a href="/orders" class="count">结算</a>
                </p>
            </div>
        </div>
    </div>
    <div class="mask"></div>
    <div class="tipDel">
        <p>确定要删除该商品吗？</p>
        <p class="clearfix">
            <a class="fl cer" href="#">确定</a>
            <a class="fr cancel" href="#">取消</a>
        </p>
    </div>
    <!--返回顶部-->
    <div class="gotop">
        <a href="/cart">
            <dl>
                <dt><img src="/static/img/gt1.png"/></dt>
                <dd>去购<br/>物车</dd>
            </dl>
        </a>
        <a href="#" class="dh">
            <dl>
                <dt><img src="/static/img/gt2.png"/></dt>
                <dd>联系<br/>客服</dd>
            </dl>
        </a>
        <a href="my_center.html">
            <dl>
                <dt><img src="/static/img/gt3.png"/></dt>
                <dd>个人<br/>中心</dd>
            </dl>
        </a>
        <a href="#" class="toptop" style="display: none;">
            <dl>
                <dt><img src="/static/img/gt4.png"/></dt>
                <dd>返回<br/>顶部</dd>
            </dl>
        </a>
        <p>400-800-8200</p>
    </div>
    <!--footer-->
    <div class="footer">
        <div class="top">
            <div class="wrapper">
                <div class="clearfix">
                    <a href="#2" class="fl"><img src="/static/img/foot1.png"/></a>
                    <span class="fl">7天无理由退货</span>
                </div>
                <div class="clearfix">
                    <a href="#2" class="fl"><img src="/static/img/foot2.png"/></a>
                    <span class="fl">15天免费换货</span>
                </div>
                <div class="clearfix">
                    <a href="#2" class="fl"><img src="/static/img/foot3.png"/></a>
                    <span class="fl">满599包邮</span>
                </div>
                <div class="clearfix">
                    <a href="#2" class="fl"><img src="/static/img/foot4.png"/></a>
                    <span class="fl">手机特色服务</span>
                </div>
            </div>
        </div>
        <p class="dibu">最家家居&copy;2013-2017公司版权所有 京ICP备080100-44备0000111000号<br/>
            违法和不良信息举报电话：188-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
    </div>
    <!----------------mask------------------->
    <div class="mask"></div>
    <!-------------------mask内容------------------->
    <div class="proDets">
        <img class="off" src="/static/img/temp/off.jpg"/>
        <div class="proCon clearfix">
            <div class="proImg fr">
                <img class="list" src="/static/img/temp/proDet.jpg"/>
                <div class="smallImg clearfix">
                    <img src="/static/img/temp/proDet01.jpg" data-src="/static/img/temp/proDet01_big.jpg">
                    <img src="/static/img/temp/proDet02.jpg" data-src="/static/img/temp/proDet02_big.jpg">
                    <img src="/static/img/temp/proDet03.jpg" data-src="/static/img/temp/proDet03_big.jpg">
                    <img src="/static/img/temp/proDet04.jpg" data-src="/static/img/temp/proDet04_big.jpg">
                </div>
            </div>
            <div class="fl">
                <div class="proIntro change">
                    <p>颜色分类</p>
                    <div class="smallImg clearfix">
                        <p class="fl on"><img src="/static/img/temp/prosmall01.jpg" alt="白瓷花瓶+20支快乐花"
                                              data-src="/static/img/temp/proBig01.jpg"></p>
                        <p class="fl"><img src="/static/img/temp/prosmall02.jpg" alt="白瓷花瓶+20支兔尾巴草"
                                           data-src="/static/img/temp/proBig02.jpg"></p>
                        <p class="fl"><img src="/static/img/temp/prosmall03.jpg" alt="20支快乐花"
                                           data-src="/static/img/temp/proBig03.jpg"></p>
                        <p class="fl"><img src="/static/img/temp/prosmall04.jpg" alt="20支兔尾巴草"
                                           data-src="/static/img/temp/proBig04.jpg"></p>
                    </div>
                </div>
                <div class="changeBtn clearfix">
                    <a href="#2" class="fl"><p class="buy">确认</p></a>
                    <a href="#2" class="fr"><p class="cart">取消</p></a>
                </div>
            </div>
        </div>
    </div>
    <div class="pleaseC">
        <p>请选择宝贝</p>
        <img class="off" src="/static/img/temp/off.jpg"/>
    </div>

</div>


<script>
    var cart_skus = {{ cart_skus|safe }};
    var cart_id = '{{ a }}';
</script>
{% if messages %}
    <script>
        {% for msg in messages %}
            alert('{{ msg.message }}');
        {% endfor %}
    </script>
{% endif %}
<script type="text/javascript" src="/static/common.js"></script>
<script src="/static/cart.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/js/public.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/js/pro.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/js/cart.js" type="text/javascript" charset="utf-8"></script>

</body>
</html>
